<template>
  <div class="section">
    <div class="backgroundImg">
      <img src="../assets/downloadBg.png" alt />
    </div>
    <div class="backgroundImg2">
      <div class="img2_box">
        <img src="../assets/downloadBanner.png" alt />
      </div>
      <div class="img2_box2">
        <!-- <img src="../assets/组 2.png" alt @click="Download_now" /> -->
        <button @click="Download_now">立即下载</button>
      </div>
    </div>
    <div class="backgroundImg3" v-if="showMask" @click="hideMask">
      <div class="img3_box">
        <img src="../assets/分组@2x.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import getUrlParams from '../js/getUrlParams.js'
import { setTimeout } from 'timers';
export default {
  data() {
    return {
      showMask: false,
      user_id: '',
      order_id: '',
      out_trade_no: '',
    }
  },
  created() {
  },
  mounted() {
    this.user_id = Cookies.get('user_id');
    this.order_id = Cookies.get('order_id');
    this.out_trade_no = Cookies.get('out_trade_no');
    // console.log(this.user_id, this.order_id, this.out_trade_no);
    this.gainOrderStatus(this.out_trade_no, this.order_id, this.user_id);
  },
  methods: {
    // 根据out_trade_no查询订单状态
    gainOrderStatus(out_trade_no, order_id, user_id) {
      var data = new URLSearchParams();
      data.append('out_trade_no', out_trade_no);
      this.axios({
        method: 'post',
        url: this.api + '/api/public/h5/wxh5_pay/index1',
        data: data
      }).then(res => {
        console.log(res);
        // alert(res.data.data.msg)
        var trade_state = res.data.data.trade_state;
        var trade_state1 = res.data.data.trade_state_desc;
        // alert(trade_state);
        // if (this.teacher_id) {
        //   if (trade_state == "SUCCESS" || trade_state1 == "支付成功") {
        //     alert('学员支付成功!');
        //   } else {
        //     window.location.href = 'http://read.lxyedu.com/zhujiao/static/index.html#/saoma?id=' + this.teacher_id;
        //   }
        // } else {
        //   if (trade_state == "SUCCESS" || trade_state1 == "支付成功") {
        //     // this.$router.push({ name: 'successPay', query: { out_trade_no: res.data.data.out_trade_no } })
        //     window.location.href = 'http://read.lxyedu.com/public/newteacher/download/index.html#/successPay?out_trade_no=' + this.out_trade_no;
        //   } else {
        //     window.location.href = 'http://read.lxyedu.com/public/newteacher/download/index.html#/failPay'
        //   }
        // }
        setTimeout(() => {
          window.location.href = 'appLXYdushuhui://';
        }, 1000)
        window.jsObject.paySuccess();
        Cookies.remove('user_id');
        Cookies.remove('order_id');
        Cookies.remove('out_trade_no');
      })
    },
    // 立即下载
    Download_now() {
      // this.showMask = true;
      var ua = window.navigator.userAgent,
        app = window.navigator.appVersion;
      if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        // ios端 
        console.log('ios');
        window.location.href = 'itms-apps://itunes.apple.com/cn/app/id1435453837?mt=8'
        // window.location.href = 'https://baidu.com'
      } else if (ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1) {
        // android端 
        console.log('android端');
        var wx = window.navigator.userAgent.toLowerCase();
        var isWeiXin = wx.indexOf('micromessenger') !== -1;
        if (isWeiXin) {
          this.showMask = true;
        } else {
          window.location.href = 'https://bbd5e31b3af9319f01be5757a0288511.dd.cdntips.com/wxz.myapp.com/16891/apk/4E258D51AE979FEC2BBB051E43C5BCAF.apk?mkey=5d63b26f7ae76e19&f=8ea4&fsname=com.lxy.jiaoyu_1.7.5_21.apk&hsr=4d5s&cip=122.231.72.236&proto=https'
        }
      }
    },
    hideMask() {
      this.showMask = false;
    }
  },
}
</script>

<style scoped>
.backgroundImg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: -1;
}

.backgroundImg img {
  width: 100%;
  overflow: hidden;
}

/* .backgroundImg2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

.backgroundImg2 .img2_box {
  width: 100%;
  margin: 0 auto;
}

.backgroundImg2 .img2_box img {
  width: 100%;
}

.backgroundImg2 .img2_box2 {
  width: 70%;
  margin: 0 auto;
  margin-top: 46px;
  box-sizing: border-box;
  padding-bottom: 40px;
}

.backgroundImg2 .img2_box2 button {
  width: 100%;
  color: #fff;
  font-weight: bold;
  background: #95662e;
  outline: none;
  border: none;
  padding: 9px 0;
  border-radius: 9px;
  font-size: 16px;
  box-shadow: 0px 2px 4px 0px rgba(160, 160, 160, 0.5);
}

.backgroundImg3 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  padding: 20px;
  box-sizing: border-box;
}

.backgroundImg3 img {
  width: 100%;
}

.box {
  position: absolute;
  width: 200px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
